<template>
    <div>
        <!-- 查询 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="查询订单">
                <el-select v-model="formInline.region" placeholder="查询订单">
                    <el-option label="开始时间" value="startTime"></el-option>
                    <el-option label="结束时间" value="endTime"></el-option>
                    <el-option label="车位号" value="carNumber"></el-option>
                    <el-option label="租客" value="name"></el-option>
                </el-select>
                <el-form-item label="查询订单">
                    <el-input v-model="formInline.user"></el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 内容表单 -->
        <el-table :data="lessorsOrdersData" style="width: 100%">
            <el-table-column
                prop="_id"
                :index="indexMethod"
                label="订单ID"
            ></el-table-column>
            <el-table-column prop="startTime" label="开始时间">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column
                prop="parkingsId.carNumber"
                label="车位号"
            ></el-table-column>
            <el-table-column
                prop="parkingsId.price"
                label="车位价格"
            ></el-table-column>
            <el-table-column
              
                label="出租周期"
            > 
            <template slot-scope="scope">
                    <span>
                        {{scope.row.parkingsId.cycle}}个月
                    </span>
            </template>

            
            </el-table-column>

            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">未支付</span>
                    <span v-if="scope.row.state == 2">已支付</span>
                    <span v-if="scope.row.state == 3">已取消</span>
                    <span v-if="scope.row.state == 4">已完成</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- <el-button @click="$router.push('/lessors/LessorsSystemOrders/'+scope.row._id)"
                        size="mini"
                        >详情</el-button
                    > -->
                    <el-button
                        @click="open(scope.row._id)"
                        type="primary"
                        style="margin-left: -15px "
                    >
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pages.allPages"
            >
            </el-pagination>
        </div>

        <!-- 抽屉 -->
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" >
              
                <h3 class="drawer-title">
                    订单详情
                </h3>
                <table >
                    <tbody>
                        <tr>
                            <td>
                                订单编号
                            </td>
                            <td>
                                {{data1[0]._id}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                用户姓名
                            </td>
                            <td>
                                {{data1[0].tenantsId.name}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                用户账号
                            </td>
                            <td>
                                {{data1[0].tenantsId.username}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                用户电话
                            </td>
                            <td>
                                {{data1[0].tenantsId.phone}}
                            </td>

                        </tr>
                        <tr>

                        </tr>
                    </tbody>


                </table>

          
                
                
         



        </el-drawer>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("lessors");
const jwt = require("jsonwebtoken");
import { TOKEN_KEY } from "../../../../node-parking/utils/const";
export default {
    data() {
        return {
            pages:{
                pageSize:2,
                currentPage:1,
                allPages:10,
            }   , 
            drawer: false,  //抽屉开关
            data1:[],  //查看详情的数据
            //查询
            formInline: {
                user: "",
                region: "name",
            },
          
            data1:[{
                _id:"",
                tenantsId:{
                    name:"",
                    username:"",
                    phone:"",
                }
            }],

            lessorsOrdersData: [
                {
                    startTime: "",
                    endTime: "",
                    state: 1,
                    _id: "",
                    cycle: 20, //出租周期
                    parkingsId: {
                        carNumber: "",
                        price: "",
                    },
                },
            ],
            lessorsId: "",
        };
    },
    mounted() {
        const { _id } = jwt.verify(localStorage.token, TOKEN_KEY);
        this.lessorsId = _id;
        this.getLessorsOrders1();
    },

    methods: {
        ...mapActions(["getLessorsOrders"]),
        async getLessorsOrders1() {
            // console.log(id);
            const data = await this.getLessorsOrders(
                { 
            lessorsId: this.lessorsId,
            type:this.formInline.region, 
            value:this.formInline.user,
            pageSize:this.pages.pageSize,
            currentPage:this.pages.currentPage,
            }
            );
            // console.log(data);
            this.lessorsOrdersData = data.data2;
            this.pages.allPages=data.allPages
            // console.log(this.allPages);
        },
        //打开抽屉
        open(id){
            this.drawer=true
            this.data1 =  this.lessorsOrdersData.filter(item=>item._id==id)
            // console.log(this.data1);
        },
        onSubmit() {
            // console.log(this.formInline.region, this.formInline.user);
            this.getLessorsOrders1()
        },
        indexMethod(index) {
            return index * 2;
        },
        //分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pages.pageSize=val
            this.getLessorsOrders1()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pages.currentPage=val
            this.getLessorsOrders1()
        },
    },
};
</script>
<style  scoped lang="scss">
.block {
    /* text-align: center; */
    margin: 0;
}

.el-drawer{
    width: 800px;
    .drawer-title{
        text-align: center;
        border-bottom: 1px solid rgb(179, 172, 172);
        height: 50px;
        line-height: 50px;
        color: rgb(119, 111, 111);
}
table{
    margin:  20px auto;
    margin-top: 20px;
    text-align: center;
    color:rgb(95, 86, 86);
    border-collapse:collapse;border:none;
     

    td{
        // border:1px solid rgb(179, 172, 172);
        border:solid rgb(88, 85, 85) 1px;
        min-width: 120px;
        height: 35px;
        padding: 0 15px;
        font-weight:600 ;
    }
}


}



</style>